/**
 * Created by DevilsEyes on 2016/3/14.
 */
'use strict';

define(['react', 'address', 'timer', 'ex'], function (React, address, timer, ex) {

    var apiList = {
        getInfo: api + 'user/order_detail'
    };


    var StatusBar = React.createClass({

        getInitialState: function () {
            return {canPayTime: this.props.canPayTime};
        },

        componentDidMount: function () {
            var out = this;
            var id = setInterval(function () {
                var t = out.state.canPayTime - 1000;

                if (t <= 0) {
                    console.log('超时啦' + t);
                    out.setState({canPayTime: 0});
                    clearInterval(id);
                    return;
                }

                out.setState({canPayTime: t});
            }, 1000)
        },

        render: function () {
            var bar;

            if (this.props.status == 0 && !this.props.cancel && this.state.canPayTime > 0) {
                bar = <p>剩余支付时间:{ex.formatTime(this.state.canPayTime, 'mm分ss秒')}</p>;
            }

            return (
                <div>{bar}
                    <button onClick={this.props.payTimeout}>按钮</button>
                </div>
            );
        }
    });

    var SKUBox = React.createClass({
        render: function () {
            return (<div></div>);
        }
    });

    var SKUList = React.createClass({
        getDefaultProps: function () {
            return [];
        },

        render: function () {
            var SKUNodes = this.props.data.map(function (sku) {
                return (<SKU data={sku}/>);
            });

            return (<div className="sku-list">
                {SKUNodes}
            </div>);
        }
    });

    var SKU = React.createClass({
        render: function () {
            return (<div></div>);
        }
    });

    var SKUStatusBar = React.createClass({
        render: function () {
            return (<div></div>);
        }
    });


    var Pager = React.createClass({

        loadData: function () {
            ex.jsonp({
                url: this.props.url,
                data: {
                    _id: this.props.id
                },

                success: function (result) {
                    //console.log(result);
                    result.data.canPayTime = 10000;
                    result.data.status = 0;
                    this.setState(result.data);

                }.bind(this)
            });
        },

        componentWillMount: function () {
            this.loadData();
        },

        payTimeout: function () {
            console.log(111);

            this.setState({cancel: 4});
        },

        render: function () {
            console.log(this.state);
            var pager;

            if (this.state) {
                pager = <div>
                    <StatusBar status={this.state.status} cancel={this.state.cancel} canPayTime={this.state.canPayTime}
                               payTimeout={this.payTimeout}/><SKUBox data={this.state.children}/></div>;
            } else
                pager = <div></div>;

            return (
                pager
            );
        }
    });


    return {
        init: function (params) {
            React.render(<Pager url={apiList.getInfo} id={params.id}/>, $('#page')[0]);
        }
    }
});